<script setup lang="ts">
import { ref } from 'vue'
import { type MainContentList } from '@/config/types'
import { EllipsisOutlined } from '@ant-design/icons-vue'
import QuickJumpAdder from './quick-jump-adder.vue'

interface Props {
  list: MainContentList[]
}
defineProps<Props>()

const adderRef = ref<InstanceType<typeof QuickJumpAdder>>()
const handleOpenModal = () => {
  adderRef.value?.openModal()
}
</script>

<template>
  <a-row class="items-center">
    <div v-for="data in list" :key="data.target">
      <slot :data="data" />
    </div>
    <a-button
      class="flex items-center justify-center ml-2"
      shape="circle"
      size="small"
      @click="handleOpenModal"
    >
      <ellipsis-outlined />
    </a-button>
  </a-row>
  <quick-jump-adder ref="adderRef" />
</template>

<style lang="scss" scoped></style>
